<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、Key是什么</h2>
  <ul>
    <li>当我们在使用v-for时，需要给单元加上key</li>
    <li>+new Date()生成的时间戳作为key，手动强制触发重新渲染</li>
  </ul>
  <div>key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点</div>
  <br>
  <h4>场景背后的逻辑</h4>
  <div>场景1: 当我们在使用v-for时，需要给单元加上key</div>
  <ul>
    <li>如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。</li>
    <li>如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed</li>
  </ul>
  <div>场景2: 用+new Date()生成的时间戳作为key，手动强制触发重新渲染</div>
  <ul>
    <li>当拥有新值的rerender作为key时，拥有了新key的Comp出现了，那么旧key Comp会被移除，新key Comp触发渲染</li>
  </ul>
  <h2>二、设置key与不设置key区别</h2>
  <div>设置key能够大大减少对页面的DOM操作，提高了diff效率</div>
  <br>
  <div>建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升</div>
  <h2>三、原理分析</h2>
  <ul>
    <li>这里判断是否为同一个key，首先判断的是key值是否相等如果没有设置key，那么key为undefined，这时候undefined是恒等于undefined</li>
    <li>updateChildren方法中会对新旧vnode进行diff，然后将比对出的结果用来更新真实的DOM</li>
    <li></li>
  </ul>
</body>
</html>